<template>
  <view class="container">
    <u-button
      type="primary"
      text="确定"
      class="button"
      @click="butnClick"
      v-if="isShowBtn"
    ></u-button>
    <map
      style="width: 100%; height: 100%"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :bindcontroltap="bindcontroltap"
      @click="bindtap"
    ></map>
    <view class="select-wrap" v-if="!isShowBtn">
      <u--input
        placeholder="请输入关键词搜索"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
        shape="circle"
        v-model="likeName"
        @change="input_change"
      ></u--input>

      <view class="policenameClass">
        <view
          class="position-wrap"
          v-for="item in position_list"
          @click="rdioHandle(item)"
        >
          <view class="position-name">
            <u-icon name="map" color="#000" size="14"></u-icon>
            <text> {{ item.fNames }}</text>
            <view class="distanc">
              <block v-if="item.distance">
                <!-- {{ (item.distance / 1000).toFixed(1) }} -->
                {{ item.distance }} {{ item.unit }}
              </block>
              <block v-else>未知距离</block>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAction, postAction } from "@/utils/request.js";
export default {
  data() {
    return {
      latitude: "",
      longitude: "",
      markers: [],
      likeName: "",
      position_list: [],
      isShowBtn: false,

      pageConfig: {
        pageNo: 1,
        pageSize: 50,
        total: 0,
      },
    };
  },
  onLoad(options) {
    this.isShowBtn = options.isShowBtn;
    uni.getLocation({
      type: "wgs84",
      success: (res) => {
        this.latitude = res.latitude;
        this.longitude = res.longitude;
        this.markers.push({
          id: 1,
          latitude: res.latitude,
          longitude: res.longitude,
          iconPath: "/static/icons/location.png",
          width: 25,
          height: 30,
        });

        this.get_target_position();
      },
    });
  },

  //   onReachBottom() {
  //     let current = (this.pageConfig.pageNo += 1);
  //     let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
  //     if (current <= pages) {
  //       this.get_target_position();
  //     } else {
  //       this.pageBottom = true;
  //     }
  //   },

  onShow() {},
  methods: {
    bindtap(e) {
      console.log(e, "bindtap");

      // 设置目标经纬度
      let targetLatitude = e.detail.latitude;
      let targetLongitude = e.detail.longitude;

      // 每次移动的步长
      let step = 0.001; // 例如每次移动0.001度

      // 设置定时器
      let interval = setInterval(() => {
        // 如果当前经纬度小于目标经纬度，则逐步增加
        if (this.latitude < targetLatitude) {
          this.latitude += step;
        }
        // 如果当前经纬度大于目标经纬度，则逐步减少
        else if (this.latitude > targetLatitude) {
          this.latitude -= step;
        }

        // 如果当前经纬度小于目标经纬度，则逐步增加
        if (this.longitude < targetLongitude) {
          this.longitude += step;
        }
        // 如果当前经纬度大于目标经纬度，则逐步减少
        else if (this.longitude > targetLongitude) {
          this.longitude -= step;
        }

        // 更新地图显示的经纬度
        // 这里可能需要调用地图相关的 API 来更新地图显示的位置
        // 例如 uni.createMapContext("map").moveToLocation({latitude: this.latitude, longitude: this.longitude});

        // 如果当前经纬度接近目标经纬度，则停止定时器
        if (
          Math.abs(this.latitude - targetLatitude) < step &&
          Math.abs(this.longitude - targetLongitude) < step
        ) {
          clearInterval(interval);
        }
      }, 100); // 每100毫秒移动一次

      this.markers = [
        {
          id: 1,
          latitude: e.detail.latitude,
          longitude: e.detail.longitude,
          iconPath: "/static/icons/location.png",
          width: 25,
          height: 30,
        },
      ];
    },
    butnClick() {
      let lat = this.latitude.toFixed(6);
      let lng = this.longitude.toFixed(6);
      uni.setStorageSync("lng_lat", { lat, lng });
      uni.navigateBack();
    },

    input_change() {
      this.get_target_position();
    },

    async get_target_position() {
      let data = {
        houseLng: this.longitude,
        houseLat: this.latitude,
        likeName: this.likeName,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      let res = await getAction("/mini/company/message/mapPoints", data);

      const list = res.result.records.map((v) => ({
        id: v.fDzbm,
        distance: v.distance
          ? Number(v.distance) < 1
            ? Number(v.distance).toFixed(2) * 1000
            : Number(v.distance).toFixed(2)
          : "",
        unit: Number(v.distance) < 1 ? "m" : "km",
        fNames: v.fNames,
        flag: false,
      }));
      //   this.position_list = this.position_list.concat(list);
      this.position_list = list;
      this.pageConfig.total = res.result.total;
    },

    rdioHandle(item) {
      uni.$emit("mapPoints", item);
      uni.navigateBack();
    },

    bindcontroltap(e) {
      console.log(e, "bindcontroltap");
      //   https://apis.map.qq.com/ws/place/v1/search?key=Q33BZ-GK7HQ-E7V57-4GFRG-H4QX6-JTFUT&keyword=%E4%B8%9C%E6%96%B0%E4%B8%96%E7%BA%AA%E5%B9%BF%E5%9C%BA&boundary=nearby(34.23236183920172,108.93433583640808,1000,1)
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  position: relative;
}
.button {
  position: absolute;
  top: 0;
  right: 0;
  width: fit-content;
  z-index: 9;
}

.select-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 700rpx;
  z-index: 9;
  padding: 30rpx;
  background-color: #fff;

  .policenameClass {
    margin-top: 30rpx;
    .position-wrap {
      height: 100rpx;
      margin-right: 16rpx;
      padding: 18rpx 0;
      border-bottom: 1rpx solid #e8e8e8;

      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .position-name {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        position: relative;
        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #181818;
        }

        .distanc {
          flex: 1;
          display: flex;
          justify-content: flex-end;
        }
      }

      .position-addr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        color: #6a6a6a;

        .add-detail {
          font-weight: 500;
          font-size: 24rpx;
          width: 548rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .distanc {
          font-weight: 400;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>
